<template>
  <div class="video">
    <video muted="muted" controls :src="videoUrl" ref="video"></video>
    <div
      class="left iconfont icon-arrow-left-bold"
      @click="$router.push('/recommend')"
    ></div>
    <!-- 内容 -->
    <div class="content">
      <h3 class="MvName">{{ videoData.name }}</h3>
      <div class="songer">
        <img :src="photo" />
        <div class="name">
          <p class="artistName">{{ videoData.artistName }}</p>
          <p class="time">{{ videoData.publishTime }}</p>
        </div>
      </div>
      <!-- 推荐MV -->
      <div class="remMVs">
        <h3>推荐MV</h3>
        <div
          v-for="item in recommend"
          :key="item.id"
          class="remMVs"
          @click="
            $router.push(
              { path: `/recommend/video/${item.id}` },
              (onComplete) => {},
              (onAbort) => {}
            )
          "
        >
          <img :src="item.cover" />
          <div class="message">
            <p class="contMV">{{ item.name }}</p>
            <p class="songs">{{ item.artistName }}</p>
          </div>
        </div>
      </div>
      <!-- MV评论 -->
      <div class="commentsMV">
        <div class="title">
          <h4>全部评论</h4>
          <div>
            <span @click="showType = false" :class="{ red: !showType }"
              >热评</span
            >
            <span @click="showType = true" :class="{ red: showType }"
              >最新</span
            >
          </div>
        </div>

        <!-- 热评 -->
        <div
          class="hot"
          v-for="(item, index) in hotComments"
          :key="item.commentId"
          v-show="!showType"
        >
          <img :src="item.user.avatarUrl" />
          <div class="nickName">
            <h4>{{ item.user.nickname }}</h4>
            <p class="time">{{ item.timeStr }}</p>
            <p class="cont">{{ item.content }}</p>
            <div
              class="fabulous iconfont icon-31dianzan"
              @click="liked(index, item.commentId, 1, 0)"
              v-show="!item.liked"
            >
              {{ item.likedCount }}
            </div>
            <div
              class="fabulous iconfont icon-dianzan_kuai"
              @click="liked(index, item.commentId, 0, 0)"
              v-show="item.liked"
            >
              {{ item.likedCount }}
            </div>
          </div>
        </div>
        <!-- 最新评论 -->
        <div
          class="hot"
          v-for="(item, index) in comments"
          :key="item.commentId"
          v-show="showType"
        >
          <img :src="item.user.avatarUrl" />
          <div class="nickName">
            <h4>{{ item.user.nickname }}</h4>
            <p class="time">{{ item.timeStr }}</p>
            <p class="cont">{{ item.content }}</p>
            <div
              class="fabulous iconfont icon-31dianzan"
              v-show="!item.liked"
              @click="liked(index, item.commentId, 1, 1)"
            >
              {{ item.likedCount }}
            </div>
            <div
              class="fabulous iconfont icon-dianzan_kuai"
              @click="liked(index, item.commentId, 0, 1)"
              v-show="item.liked"
            >
              {{ item.likedCount }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 发布评论 -->
    <div class="postComment">
      <input type="text" v-model="comment" />
      <button @click="sumit">发表评论</button>
    </div>
  </div>
</template>

<script>
import {
  getMvUrl,
  getMvDetail,
  getMvExclusiveRcmd,
  getCommentMv,
  getComment,
} from "@/api/mv";
import { getCommentLike } from "@/api/music";
export default {
  beforeRouteUpdate(to, from, next) {
    // 组件复用
    console.log("进入", to);
    console.log("离开", from);
    this.id = to.params.mvid;
    next();
    this.getMvUrl();
    this.getMvDetail();
    this.getPersonalizedMv();
    this.getCommentMv();
  },
  props: ["stopMusic", "playerId"],
  data() {
    return {
      id: this.$route.params.mvid,
      videoUrl: "", //MV url
      videoData: {}, //MV详细数据
      photo: "", //头像
      recommend: [], //网易MV
      hotComments: [], //热门评论
      comments: [], //最新评论
      showType: false, //控制显示 热评 false  最新评论  true
      comment: "", //发表评论
    };
  },
  methods: {
    // 发表评论
    async sumit() {
      const data = await getComment({
        t: 1,
        type: 1,
        id: this.id,
        content: this.comment,
      });
      if (data.code == 200) {
        this.$toast("发布成功");
      }
      this.comment = "";
    },
    // 点赞   commentType判断是 0:热门评论  1:最新评论    ,t 1: 点赞  0:取消
    async liked(index, commentId, t, commentType) {
      const data = await getCommentLike({
        id: this.id,
        cid: commentId,
        t: t,
        type: 1,
      });
      if (data.code == 200) {
        if (commentType == 0) {
          if (t == 1) {
            let flag = true;
            this.$set(this.hotComments[index], "liked", flag);
            this.$set(
              this.hotComments[index],
              "likedCount",
              this.hotComments[index].likedCount + 1
            );
          } else {
            let flag = false;
            this.$set(this.hotComments[index], "liked", flag);
            this.$set(
              this.hotComments[index],
              "likedCount",
              this.hotComments[index].likedCount - 1
            );
          }
        } else {
          if (t == 1) {
            let flag = true;
            console.log(index, flag);
            this.$set(this.comments[index], "liked", flag);
            this.$set(
              this.comments[index],
              "likedCount",
              this.comments[index].likedCount + 1
            );

            console.log("点赞后", this.comments);
          } else {
            let flag = false;
            this.$set(this.comments[index], "liked", flag);
            this.$set(
              this.comments[index],
              "likedCount",
              this.comments[index].likedCount - 1
            );
          }
        }
      }
    },
    // 获取MV url
    async getMvUrl() {
      console.log("当前Id:", this.id);
      const { data } = await getMvUrl({ id: this.id });
      console.log(data);
      this.videoUrl = data.url;
    },
    // 获取MV详细数据
    async getMvDetail() {
      const { data } = await getMvDetail({ mvid: this.id });
      console.log("mv详情", data);
      this.videoData = data;
      this.photo = data.artists[0].img1v1Url;
    },
    // 获取网易出品MV
    async getPersonalizedMv() {
      const { data } = await getMvExclusiveRcmd();
      console.log("推荐MV", data);
      this.recommend = data;
    },
    // 获取MV评论
    async getCommentMv() {
      const data = await getCommentMv({ id: this.id });
      console.log("评论", data);
      this.hotComments = data.hotComments;
      this.comments = data.comments;
    },
  },
  created() {
    if (this.playerId) {
      this.$emit("stopMusic");
    }
    this.getMvUrl();
    this.getMvDetail();
    this.getPersonalizedMv();
    this.getCommentMv();
  },
};
</script>

<style lang="less" scoped>
.video {
  background: url("../../assets/bg.webp") no-repeat;
  background-size: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 2;
  video {
    width: 100%;
    height: 32vh;
    margin: 0;
  }
  .left {
    position: absolute;
    top: 15px;
    left: 5px;
    font-size: 25px;
    color: #fff;
  }
  .content {
    height: 62vh;
    overflow-x: hidden;
    padding: 10px;
    .MvName {
      font-size: 16px;
      color: #100e11;
      font-weight: normal;
      margin-bottom: 5px;
    }
    .songer {
      display: flex;
      align-items: center;
      img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .name {
        .artistName {
          color: #000;
        }
        .time {
          font-size: 12px;
          color: #170f0f;
        }
      }
    }
    .remMVs {
      margin-top: 15px;
      h3 {
        font-size: 16px;
        color: #100e11;
      }
      .remMVs {
        display: flex;
        align-items: center;
        img {
          width: 110px;
          height: 65px;
          border-radius: 10px;
          margin-right: 10px;
        }
        .message {
          flex: 1;
          .contMV {
            font-size: 14px;
            color: #100e11;
          }
          .songs {
            font-size: 12px;
            color: #5f5d61;
          }
        }
      }
    }
    .commentsMV {
      margin-top: 10px;
      .title {
        display: flex;
        justify-content: space-between;
        h4 {
        }
        span {
          margin-right: 10px;
          font-size: 14px;
        }
        .red {
          color: rgb(221, 20, 20);
        }
      }
      .hot {
        padding: 10px 20px;
        display: flex;
        img {
          height: 35px;
          width: 35px;
          border-radius: 50%;
          margin-right: 8px;
        }
        .nickName {
          position: relative;
          flex: 1;
          padding-bottom: 10px;
          border-bottom: 1px solid #afa8a8;
          h4 {
            font-size: 14px;
            color: #4b4b4b;
          }
          .time {
            font-size: 10px;
            color: #bfbfbf;
          }
          .cont {
            font-size: 14px;
            line-height: 20px;
            color: #2c2c2c;
          }
          .fabulous {
            position: absolute;
            right: 0;
            top: 5px;
            font-size: 14px;
          }
        }
      }
    }
  }
  .postComment {
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0;
    display: flex;
    input {
      padding-left: 10px;
      flex: 1;
      height: 5vh;
      line-height: 5vh;
      border: 0;
      margin: 0;
    }
    button {
      margin: 0;
      height: 5vh;
      line-height: 5vh;
      border: 0;
      color: rgb(221, 20, 20);
    }
  }
}
</style>
